<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <script src='https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.js'></script> -->
    <script src="./js/echarts.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      const chartDom = document.getElementById("chart");
      /*
       * dark 暗色主题
       * renderer 默认是使用的 canvas渲染，也可以改成 svg渲染，如下
       */
      const chart = echarts.init(chartDom);
      chart.setOption({
        title: { text: "Echart 多系列案例" },
        xAxis: {
          data: ["一季度", "二季度", "三季度", "四季度"],
        },
        yAxis: {},
        series: [
          {
            type: "pie",
            center: ["50%", 60], // 距左侧 50%，距上侧有60个像素
            radius: 35,
            data: [
              { name: "分类1", value: 50 },
              { name: "分类2", value: 60 },
              { name: "分类3", value: 55 },
              { name: "分类4", value: 70 },
            ],
          },
          {
            type: "line",
            data: [100, 112, 96, 123],
          },
          {
            type: "bar",
            data: [79, 81, 88, 72],
          },
        ],
      });
    </script>
  </body>
</html>
